﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"
    CodeBehind="Create.aspx.cs" Inherits="Roommate.Web.Views.Booking.Create" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">

        $(document).ready(function() {

            $("#tabView > ul").tabs();
            $('.date-pick').datepicker({ dateFormat: 'yy-mm-dd'});

            $("#searchForm").validate({
                submitHandler: ExecuteSearch
            });

            $("#availableRooms").tablesorter();
            $("#selectedRooms").tablesorter();

            $("#btnAddSelectedRooms").click(AddSelectedRooms);

        });

        var g_avaliableRooms;

        function AddSelectedRooms() {

            $("#availableRooms :checkbox").each(function(i) {

                if (!this.checked)
                    return;
                var room = g_avaliableRooms[this.roomIndex];
                var tableBody = $("#selectedRooms tbody");
                var row = $("<tr/>");
                $("<td/>").html(room.Type).appendTo(row);
                $("<td/>").html(room.Number).appendTo(row);
                $("<td/>").html(room.Price).appendTo(row);
                var lastCol = $("<td/>").html($("<a/>").html("delete")
                            .attr("id", "deleteRoom")
                            .attr("roomNumber", room.Number));

                var index = $("#selectedRooms tbody tr").length;

                lastCol.append($("<input type='hidden' name='reservationRequest.ReservedRooms.Index'/>").val(index));
                lastCol.append($("<input type='hidden'/>")
                        .attr("name", "reservationRequest.ReservedRooms[" + index + "].From")
                        .val($('#fromDate').attr("value")));
                lastCol.append($("<input type='hidden'/>")
                        .attr("name", "reservationRequest.ReservedRooms[" + index + "].To")
                        .val($('#toDate').attr("value")));
                lastCol.append($("<input type='hidden'/>")
                        .attr("name", "reservationRequest.ReservedRooms[" + index + "].RoomNumber")
                        .val(room.Number));
                lastCol.appendTo(row)


                tableBody.append(row);

            });
        }

        function ExecuteSearch() {

            //users room requirements
            var roomRequriements = {
                "requirements.From": $('#fromDate').attr("value"),
                "requirements.To": $('#toDate').attr("value")
            }


            //clear table
            $("#availableRooms tbody").html("");
            $.getJSON("/Booking/FindRooms", roomRequriements, function(rooms) {
                g_avaliableRooms = rooms;
                $.each(rooms, function(i, room) {
                    var row = $("<tr/>");

                    $("<td/>").html(room.Type).appendTo(row);
                    $("<td/>").html(room.Number).appendTo(row);
                    $("<td/>").html(room.Price).appendTo(row);
                    $("<td/>").html($("<input type='checkbox'/>")
                           .attr("roomIndex", i)).appendTo(row);

                    $("#availableRooms tbody").append(row);
                });

                $("#availableRooms").trigger("update");

            });

            return false;
        }  
    </script>

    <div id="tabView">
        <ul>
            <li><a href="#fragment-1"><span>Booking</span></a></li>
            <li><a href="#fragment-2"><span>Todo 2</span></a></li>
            <li><a href="#fragment-3"><span>Todo 3</span></a></li>
        </ul>
        <div id="fragment-1">
            <div>
                Search for available rooms
                <form id="searchForm">
                <input type="text" id="fromDate" class="date-pick dateISO required" />
                <input type="text" id="toDate" class="date-pick dateISO required" />
                <input id="btnSearch" type="submit" value="Search" />
                </form>
            </div>
            <div>
                Selected rooms
                <table id="availableRooms" class="tablesorter">
                    <thead>
                        <tr>
                            <th>
                                Type
                            </th>
                            <th>
                                Room
                            </th>
                            <th>
                                Price
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <input id="btnAddSelectedRooms" type="button" value="Add Selected" />
            </div>
            <div>
                <form method="post" action="/Booking/Create">
                <table id="selectedRooms" class="tablesorter">
                    <thead>
                        <tr>
                            <th>
                                Type
                            </th>
                            <th>
                                Room
                            </th>
                            <th>
                                Price
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <input id="submitReservation" type="submit" value="Submit reservation" />
                </form>
            </div>
        </div>
        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
            sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
            ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
            sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
            ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat.
        </div>
    </div>
    <%= Html.ValidationSummary() %>
</asp:Content>
